<template>
  <div class="lastest-music">
    <Title title="最新音乐"></Title>
    <ul class="list">
      <li class="item" v-for="item in lists" :key="item.id" @dblclick='setId(item.id)'>
        <a href="#">
          <div class="img">
            <img :src="item.picUrl" alt="" />
            <Ico
              color="#f40"
              :styles="{
                width: '2.8rem',
                height: '2.8rem',
                paddingLeft: '0.1rem',
                paddingTop: '0.4rem',
                background: `#fff`,
                top: '1.4rem',
                left: '1.4rem',
              }"
            ></Ico>
          </div>
          <div class="info">
            <span class="name ofh">{{ item.song.name }}</span>
            <span class="singer ofh">{{ item.song.artists[0].name }}</span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import Title from "./Title";
import Ico from "./Ico";
import axios from "@/utils/axios";
export default {
  name: "LastestMusic",
  data() {
    return {
      lists: [],
    };
  },
  components: {
    Title,
    Ico,
  },
  methods: {
    setId(id) {
      this.$bus.$emit("changeId", id);
    },
  },
  created() {
    axios
      .get("/personalized/newsong", { params: { limit: 12 } })
      .then((res) => {
        this.lists = res.result;
      });
  },
};
</script>

<style lang="scss" scoped>
.lastest-music {
  .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
    .item {
      width: 24rem;
      height: 6rem;
      margin: 1rem 0;
      a {
        display: flex;
        flex-wrap: wrap;
        color: inherit;
        .img {
          position: relative;
          width: 6rem;
          height: 6rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }
        }
        .info {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 10rem;
          margin-left: 1rem;
          .name {
            font-size: 1.3rem;
            font-weight: bold;
          }
          .singer {
            margin-top: 0.3rem;
            font-size: 1rem;
          }
        }
      }
    }
  }
}
</style>